import { useSelector, useDispatch } from "react-redux";

import numStatus from "@/store/NumStatus";

export default function Page1() {
  const { num,sarr } = useSelector((state: RootState) => ({
    num: state.handleNum.num,
    sarr: state.handleArr.sarr,
  }));

  // 通过useDispatch修改仓库数据
  const dispatch = useDispatch();
  const changeNum = () => {
    // dispatch({type:"",value}) type是固定的 value是自定义的
    // dispatch({type:"add1"})
    dispatch({ type: "add3", value: 300 });
  };
  const changeNum2 = () => {
    // 最开始的写法是同步的
    // dispatch({ type: "add1", value: 100 });
    // 异步写法 —— redux-thunk 的用法
    // dispatch(异步执行的函数)
    // dispatch((dis:Function)=>{
    //   setTimeout(()=>{
    //     dis({ type: "add1"})
    //   },1000)
    // })

    // 优化 redux-thunk 的异步写法
    // dispatch(调用状态管理中的asyncAdd1)
    dispatch(numStatus.asyncActions.asyncAdd1);
  };

  // 对sarr的操作
  // const { sarr } = useSelector((state: RootState) => ({
  //   sarr: state.handleArr.sarr,
  // }));
  const changeArr = () => {
    dispatch({ type: "sarrpush", value: 100 });
  };

  return (
    <div className="home">
      <h1>Page1</h1>
      <h1>{num}</h1>
      <h1>{num}</h1>
      <button onClick={changeNum}>同步按钮</button>
      <button onClick={changeNum2}>异步按钮</button>
      <hr />
      <p>{sarr}</p>
      <button onClick={changeArr}>按钮</button>
    </div>
  );
}
